{% extends "base.html" %}

{% load i18n %}
{% load openid_tags %}
{% load generic_flatblocks %}

{% block extra_head_base %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/site_tabs.css" />
    {% block extra_head %}
	<style type="text/css">
	
		div#feature_list {
			width: 650px;
			height: 330px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs_slideshow {
			left: 0;
			z-index: 2;
			width: 220px;
		}

		ul#tabs_slideshow li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs_slideshow li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs_slideshow li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs_slideshow li a:hover {
			text-decoration: underline;
		}

		ul#tabs_slideshow li a.current {
			background:  url('{{ STATIC_URL }}img/imagen_actual.png');
			color: #FFF;
		}

		ul#tabs_slideshow li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 465px;
			height: 330px;
            background: green;
		}

		ul#output li img{
			width: 465px;
			height: 330px;
		}


		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}
        .comentarios{
            background: #DDDDDD none repeat scroll 0 0;
            margin-bottom:20px;
            padding: 10px;
            border: medium none;
            -moz-background-clip:border;
            -moz-background-inline-policy:continuous;
            -moz-background-origin:padding;
            -moz-border-radius-bottomleft:4px;
            -moz-border-radius-bottomright:4px;
            -moz-border-radius-topleft:4px;
            -moz-border-radius-topright:4px;
        }

        .body_blog{
            background: #DDDDDD none repeat scroll 0 0;
            margin-bottom:20px;
            padding: 10px;
            border: medium none;
            -moz-background-clip:border;
            -moz-background-inline-policy:continuous;
            -moz-background-origin:padding;
            -moz-border-radius-bottomleft:4px;
            -moz-border-radius-bottomright:4px;
            -moz-border-radius-topleft:4px;
            -moz-border-radius-topright:4px;
        }

	</style>
    {% endblock %}
{% endblock %}

{% block website_title %}
    {% gblock "website_header" for "gblocks.Title" with "gblocks/title/website.html" %}
{% endblock %}

{% block login %}
    {% if user.is_authenticated %}
       <a class="tab_logout" href="/openid/logout/?next={% url acct_logout %}"><span>{% trans "Logout" %}</span></a>
       <a class="tab_account" href="{% url acct_email %}"><span>{% trans "Account" %}</span></a>
    {% else %}
        <a class="tab_login" href="{% url acct_login %}"><span>{% trans "Login" %}</span></a>
    {% endif %}
{% endblock %}

{% block tabs %}
    {% spaceless %}
    <a class="tab_home" href="{% url home %}">{% trans "Home" %}</a>
<!--    <a class="tab_support" href="{% url support %}">{% trans "Support" %}</a> -->
    <a class="tab_blog" href="/blog/">{% trans "Blog" %}</a>
    <a class="tab_products" href="{% url products %}">{% trans "Products" %}</a>
    <a class="tab_about_us" href="{% url about_us %}">{% trans "About Us" %}</a>
    {% endspaceless %}
{% endblock %}

{% block content_image %}
    {% if not galeria %}
        {% gblock "website_image" for "gblocks.image" with "gblocks/image/content_image.html" %}
    <br/><br/><br/>
    {% else %}
    		<div id="feature_list">
			<ul id="tabs_slideshow">
                {% for photo in galeria %}
				<li>
					<a href="javascript:;">
						<!-- <img src="{{ STATIC_URL }}img/applications.png" /> -->
						<h3>{{ photo.title }}</h3>
						<!--<span>{{ photo.caption|truncatewords:4 }}</span>-->
					</a>
				</li>
                {% endfor %}
			</ul>
			<ul id="output">
                {% for photo in galeria %}
				<li>
					<img src="{{ photo.get_pagina_principal_url }}" />
					<a href="{{ photo.caption }}">{{ photo.title }}</a>
				</li>
                {% endfor %}
			</ul>
		</div>
    <br/><br/><br/>
    {% endif %}
{% endblock %}

{% block footer %}
    {% gblock "website_footer" for "gblocks.Text" %}
{% endblock %}

{% block extra_body %}
<script type="text/javascript">
$(document).ready(function(){
    $('a.frontendadmin_edit').hover(
        function(){$(this).parent().css('outline', '4px solid #E9B007')},
        function(){$(this).parent().css('outline', '')}
    );
    
    $('a.frontendadmin_edit').click(function(){
            $(this).parent().css('outline', '');
            $(this).parent().load(this.href);
            return false;
    });
    
    $('a.frontendadmin_delete').hover(
        function(){$(this).parent().css('outline', '4px solid #E9B007')},
        function(){$(this).parent().css('outline', '')}
    );
    $.featureList(
    	$("#tabs_slideshow li a"),
		$("#output li"), {
    		start_item	:	0,
            transition_interval : 3000,
		}
	);
});
</script>
{% endblock %}
